<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  let charts = echarts.init(document.getElementById('box'));

  let data = [],
    xData = [],
    yData = [],
    maxTime = ''
  $.get('./data/1.json', function (d) {
    data = d;
    let m = 0;
    data.forEach(item => {
      xData.push(item.time)
      yData.push(item.num)
      if (item.num > m) {
        m = item.num;
        maxTime = item.time
      }
    });
    option.series[0].markLine.data[0].xAxis = maxTime
    charts.setOption(option);
  })
  let option = {
    backgroundColor: 'rgba(0,0,0,.5)',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // 两边留白
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      data: xData,
      axisLine: {
        lineStyle: {
          color: '#000',
          width: 1
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255,255,255,.2)',
          width: 1
        },
        show: true
      },
    },
    yAxis: {
      name: '人数',
      type: 'value',
      scale: true,
      nameTextStyle: {
        color: 'rgba(255,255,255,.5)',
        align: 'right',
        padding: [0, 10, 0, 0],
        fontSize: '100%'
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: '100%'
        },
        margin: 8
      },
      axisLine: {
        lineStyle: {
          color: '#000',
          width: 1
        }
      },
      splitLine: {
        lineStyle: {
          type: 'solid',
          color: 'rgba(255,255,255,.2)',
          width: 1
        },
        show: true
      }
    },
    series: [{
      name: "QQQ",
      type: 'line',
      data: yData,
      symbol: 'none',
      markLine: {
        symbol: 'none',
        data: [{
          name: "高峰",
          xAxis: maxTime,
          lineStyle: {

          }
        }]
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(236, 99, 123, .9)' // 0% 处的颜色
          }, {
            offset: 1,
            color: 'rgba(102, 212, 250,.0)' // 100% 处的颜色
          }]
        }
      },
      lineStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgb(236, 99, 123)' // 0% 处的颜色
          }, {
            offset: 1,
            color: 'rgb(102, 212, 250)' // 100% 处的颜色
          }]
        },

        width: 2
      }
    }]
  }
</script>